<template>
	<view>
		<view class="u-skeleton">
			<!-- 导航栏 -->
			<u-navbar :is-back="false" title="" :border-bottom="false" :background="background" :height="height">
				<view class="slot-wrap">
					<view class="left" @click="navTo('back')">
						<view class="iconfont iconfanhui"></view>
					</view>
					<view class="right" @click="navTo('share')">
						<view class="iconfont iconfenxiang"></view>
					</view>
				</view>
			</u-navbar>
			<view class="header-top">
				<view class="info">
					<view class="name u-skeleton-fillet">{{ team.name }}</view>
					<view class="company u-skeleton-fillet">{{ team.office_name }}</view>
					<view class="tag">
						<u-tag class="bb u-skeleton-fillet" :text="tag.name" mode="plain" size="mini" color="#d9b975" border-color="#d9b975" v-for="(tag, index) in team.tags" :key="index" />
					</view>
				</view>
				<view class="avatar">
					<image class="img u-skeleton-circle" :style="{opacity: team.isonline===1 ? 1 : 0.5}" :src="team.avatar || '../../static/images/avatar.png'" mode=""></image>
					<!-- <view class="cate u-skeleton-circle" :style="{opacity: current===1 ? 0.5 : 1}">
						<view class="item">
							<text>婚姻</text>
							<text>家事</text>
						</view>
					</view> -->
					<view class="online u-skeleton-fillet" v-if="team.isonline === 1">
						<view class="iconfont iconduihao"></view>
						<view class="text">在线</view>
					</view>
					<view class="offline u-skeleton-fillet" v-else>
						<view class="circel"></view>
						<view class="text">离线</view>
					</view>
				</view>
			</view>
			<view class="introduce">
				{{ team.description }}
			</view>
			<view class="team-con">
				<view class="title u-skeleton-fillet">团队成员</view>
				<view class="member-con">
					<view class="member-item" v-for="(member, index) in team.members" :key="index" @click="openLawyerDetail(member)">
						<image class="u-skeleton-circle" :src="member.avatar || '../../static/images/avatar.png'" mode=""></image>
						<view class="u-skeleton-fillet">{{ member.nickname }}</view>
					</view>
				</view>
			</view>
			<view class="service-tit">
				<view class="tit u-skeleton-fillet">法律咨询</view>
				<view class="intro u-skeleton-fillet" @click="serviceIntroduce">
					<text class="iconfont icontishishuoming"></text>
					<text>服务说明</text>
				</view>
			</view>
			<!-- <view class="iconfont iconduihao" style="color: #0d2647;"></view> -->
			<view class="service">
				<view :class="['item-bg', {active: active === index}]" v-for="(item, index) in team.business" :key="index" @click="selItem(item, index)">
					<view class="item">
						<view class="icon u-skeleton-circle">
							<view class="iconfont icontupian" v-if="item.type == 0"></view>
							<view class="iconfont icondianhua" v-if="item.type == 1"></view>
							<view class="iconfont iconwj-ws" v-if="item.type == 2"></view>
							<view class="iconfont iconanjian" v-if="item.type == 3"></view>
							<view class="iconfont iconanjianshenhe" v-if="item.type == 4"></view>
							<view class="iconfont iconqiyeguanli" v-if="item.type == 5"></view>
						</view>
						<view class="ser" v-if="item.type == 0">
							<text class="u-skeleton-fillet">图文咨询</text>
							<text class="u-skeleton-fillet">1小时内无限对话</text>
						</view>
						<view class="ser" v-if="item.type == 1">
							<text class="u-skeleton-fillet">电话咨询</text>
							<text class="u-skeleton-fillet">30分钟高效沟通</text>
						</view>
						<view class="ser" v-if="item.type == 2">
							<text class="u-skeleton-fillet">文书服务(订金)</text>
							<text class="u-skeleton-fillet">文书定制、合同审查/修改</text>
						</view>
						<view class="ser" v-if="item.type == 3">
							<text class="u-skeleton-fillet">律师函(订金)</text>
							<text class="u-skeleton-fillet">视案件起草确认后邮寄</text>
						</view>
						<view class="ser" v-if="item.type == 4">
							<text class="u-skeleton-fillet">案件委托</text>
							<text class="u-skeleton-fillet">打官司/约见律师</text>
						</view>
						<view class="ser" v-if="item.type == 5">
							<text class="u-skeleton-fillet">企业服务</text>
							<text class="u-skeleton-fillet">法务服务/法律培训</text>
						</view>
						<view class="money u-skeleton-fillet">
							<view class="price" v-if="item.type == 0">{{ item.amount }}元/1小时</view>
							<view class="price" v-if="item.type == 1">{{ item.amount }}元/30分钟</view>
							<view class="price" v-if="item.type == 2">{{ item.amount }}元/次</view>
							<view class="price" v-if="item.type == 3">{{ item.amount }}元/次</view>
							<view class="price" v-if="item.type == 4">{{ item.amount }}元/次</view>
							<view class="price" v-if="item.type == 5">{{ item.amount }}元/次</view>
							<view class="no-icon" v-show="active !== index"></view>
							<view class="iconfont iconduihao" v-show="active === index"></view>
						</view>
					</view>
				</view>
			</view>
			<view class="comment">
				<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption" height="auto">
					<view class="title">
						<view class="com u-skeleton-fillet">客户评价</view>
						<view class="num" v-show="commentTotal > 0">({{ commentTotal }})</view>
						<!-- <view class="more u-skeleton-fillet">
							<text class="all">查看全部</text>
							<text class="iconfont icongengduo"></text>
						</view> -->
					</view>
					<view class="list-con" v-if="commentList.length > 0">
						<view class="list" v-for="(item, index) in commentList" :key="index">
							<image class="img u-skeleton-circle" :src="item.avatar" mode=""></image>
							<view class="phone">
								<view class="u-skeleton-fillet">{{ item.nickname }}</view>
								<view class="info u-skeleton-fillet">{{ item.appraisal }}</view>
							</view>
							<view class="time u-skeleton-fillet">{{ item.appraisal_time }}</view>
						</view>
					</view>
					<view style="text-align: center;color: #999;padding: 40rpx 0;" v-else>暂无评价</view>
				</mescroll-body>
			</view>
			<view class="btn-con">
				<!-- <view class="favorite">
					<view class="iconfont iconfav"></view>
					<view class="shou">收藏</view>
				</view> -->
				<view class="favorite" @click="favorite">
					<view :class="['iconfont','iconfavfill', {'fav': team.favorite === 1}]"></view>
					<view class="shou">收藏</view>
				</view>
				<view class="btn" @click="counseling">立即咨询</view>
			</view>
			
			<u-modal class="team-content" v-model="showModal" confirm-text="关闭" confirm-color="#6d788a" :show-title="false" :mask-close-able="true">
				<view class="slot-content">
					<view class="header">
						<view class="top">
							<image :src="lawyerDetail.avatar || '../../static/images/avatar.png'" mode=""></image>
							<view>
								<view class="name">
									<text>{{ lawyerDetail.nickname }}</text>
									<text class="over-hidden" style="display: inline-block;width: 224rpx;">{{ lawyerDetail.job_title }}</text>
								</view>
								<view class="company">{{ lawyerDetail.office_name }}</view>
							</view>
						</view>
						<view class="bot">
							<u-tag class="bb" :text="tag.name" mode="plain" size="mini" color="#d9b975" border-color="#d9b975" v-for="(tag, index) in lawyerDetail.tag" :key="index" />
						</view>
						<image class="bg" src="../../static/images/user_header_bg.png" mode=""></image>
					</view>
					<!-- <view class="info">
						{{ lawyerDetail.introduction || '暂无详细说明' }}
					</view> -->
					
					<view>
						<scroll-view style="height: 600rpx;" scroll-y="true">
							<view class="info">
								{{ lawyerDetail.introduction || '暂无详细说明' }}
							</view>
						</scroll-view>
					</view>
				</view>
			</u-modal>
			
			<u-modal v-model="serviceIntroduceModal" title="咨询提示" confirm-text="已知晓" :confirm-style="confirmStyle" :title-style="titleStyle" :mask-close-able="true">
				<view style="padding: 30rpx;font-size: 24rpx;color: #888c99;">1.律师接单后，将在5分钟后给您来电，请注意号码为021开头的来电，请勿拦截或拒接，此号码为转接号码， 请勿回拨；<br>2.电话服务为一次性服务，请选择信号好的场所接听，接通后一次性完成咨询服务;<br>3.如律师已接单，电话未接通，可在7天内结束订单申请退款，满足退款条件的订单，款项将退还至您的账户余额，可至APP【我】的页面查看；<br>4.如律师未接单，可取消订单，重新选择律师或领域。咨询费保留在您的账户余额;<br>5.为保障服务质量及您的权益，通话将做录音；电话咨询，请讲普通话；<br>6.该服务律师仅对您的咨询做出解答和建议，如需文书审查、代写、陪同、案件委托等，请至律师主页购买文书服务或案件委托，需购买后方可开启服务；<br>7.该服务律师仅对您的法律问题及相关问题做出解答，非法律问题律师有权不做解答，且不退回支付金额。</view>
			</u-modal>
		</view>
		<u-skeleton :loading="loading" el-color="#eee" bg-color="#fff" :animation="true"></u-skeleton>
	</view>
</template>

<script>
	import MescrollItem from "@/components/tabs/mescroll-swiper-item.vue"
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js"
	import { getTeamFind, teamFavorite, findLawyer, getAppraisal } from '@/api/lawyerApi.js'
	import appShare, { closeShare } from "@/plugins/share/index.js"
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				upOption: {
					use: true,
					auto: false,
					page: {
					  num: 1,
					  size: 10 // 每页数据的数量,默认10
					},
					empty: {
					  use: false
					},
					toTop: {
					  src: ''
					},
					onScroll: false,
					textNoMore: ''
				},
				downOption: {
					auto: false, // 是否在初始化完毕之后自动执行下拉刷新的回调; 默认true
					onScroll: false,
					page: {
					    num: 1,
					    size: 10 // 每页数据的数量,默认10
					}
				},
				background: {
					background: 'url(../../static/images/lawyer_detail_header_bg01.jpg) no-repeat',
					backgroundSize: 'cover',
				}, // 导航栏背景
				height: 44, // 导航栏高度，默认是ios的高度
				loading: true, // 是否显示骨架屏组件
				current: 0,
				active: -1, // 默认选中为空
				showModal: false,
				serviceIntroduceModal: false,
				confirmStyle: {
					backgroundColor: '#0d2647',
					color: '#fff'
				},
				titleStyle: {
					fontSize: '38rpx',
					color: '#2c313c'
				},
				team: {
					name: '薛正义',
					office_name: '浙江安瑞律师事务所',
					description: '简介：华东政法大学国际经济法专业本科毕业，后取得英国曼彻斯特大学国际商法学硕士学位',
					avatar: '../../static/images/avatar.png',
					tags: [
						{id: 1, name: "婚姻家事", status: 1},
						{id: 2, name: "房产纠纷", status: 1},
						{id: 3, name: "公司工商", status: 1},
						{id: 4, name: "公司工商", status: 1}
					],
					members: [
						{id: 1, nickname: "鱼皮脆"},
						{id: 2, nickname: "鱼皮脆"},
						{id: 3, nickname: "鱼皮脆"},
						{id: 4, nickname: "鱼皮脆"},
						{id: 5, nickname: "鱼皮脆"},
						{id: 6, nickname: "鱼皮脆"}
					],
					business: [
						{"type": "1","amount": "0","status": "1"},
						{"type": "1","amount": "0","status": "1"},
						{"type": "1","amount": "0","status": "1"}
					]
				},
				consultingType: '',
				teamId: '',
				disabledClick: true,
				lawyerDetail: {},
				commentForm: {
					p: 1,
					length: 10,
					id: ''
				},
				commentList: [],
				commentTotal: 0,
				userId: '',
			}
		},
		onLoad(options) {
			console.log(options)
			this.teamId = this.commentForm.id = options.id
			// this.commentForm.id = options.id
			if(uni.getSystemInfoSync().platform != "ios") {
				this.height = 35
			}
			this._getTeamFind(options.id)
			this._getAppraisal() // 获取当前团队评价
		},
		methods: {
			async _getAppraisal() {
				const res = await getAppraisal(this.commentForm)
				this.commentList = [...this.commentList, ...res.data.data.list]
				this.commentTotal = res.data.data.total
				if (this.commentList.length === this.commentTotal) {
					this.mescroll.endSuccess(res.data.data.list, false)
				} else {
					this.mescroll.endSuccess(res.data.data.list, true)
				}
				console.log(res)
			},
			upCallback(page) {
				console.log('加载更多')
				console.log(page)
				this.commentForm.p++
				this._getAppraisal()
				// setTimeout(() => {
				// 	this.mescroll.endSuccess([], false)
				// }, 500)
				// this.tabs[this.tabIndex].orderForm.p++
				// this._orderListClient()
			},
			async _getTeamFind(id) {
				const res = await getTeamFind({id: id})
				console.log(res)
				this.team = res.data.data.list
				setTimeout(() => {
					this.loading = false
				}, 500)
			},
			navTo(option) {
				if (option === 'back') {
					uni.navigateBack()
				} else if (option === 'share') {
					// #ifdef APP-PLUS
					if (!uni.getStorageSync('user')) {
						setTimeout(() => {
							this._login()
						}, 300)
					} else {
						this.onShare()
					}
					// #endif
				}
			},
			onShare() {
				if (uni.getStorageSync('user')) {
					this.userId = uni.getStorageSync('user').member.id
					console.log(this.userId)
				}
				let shareData = {
					type: 0,
					// shareUrl:"https://weixin.arapp.net/#/",
					shareUrl:"https://api.arapp.net/client/visitor/authByWeb?id=" + this.userId,
					shareTitle: this.team.name + "，多v1提供法律咨询",
					shareContent:"严谨专业高效的真实律师团队服务",
					shareImg:"https://oss.arapp.net/defaut-img/logo.png",
					// appId : "wxd0e0881530ee4444", // 默认不传type的时候，必须传appId和appPath才会显示小程序图标
					// appPath : "pages/home/home",
					// appWebUrl : "https://kemean.com/",
				};
				// 调用
				let shareObj = appShare(shareData,res => {
					console.log("分享成功回调",res);
					// 分享成功后关闭弹窗
					// 第一种关闭弹窗的方式
					closeShare();
				});
			},
			selItem(item, index) {
				this.active = index
				console.log(item)
				this.consultingType = item.type
			},
			counseling() {
				const token = uni.getStorageSync('token')
				// console.log(token)
				if (!token) {
					uni.showToast({title: '未登录',icon: 'none'})
					setTimeout(() => {
						console.log('你执行了吗')
						this._login()
						console.log('我执行了')
					}, 500)
				} else {
					if (!this.consultingType) return uni.showToast({title: '请选择咨询项目',icon: 'none'})
					if (this.consultingType == 0) {
						uni.navigateTo({url:`/pages/order/telephone-counseling1?type=0&team=${this.teamId}`})
					} else if (this.consultingType == 1) {
						uni.navigateTo({url:`/pages/order/telephone-counseling2?type=1&team=${this.teamId}`})
					} else if (this.consultingType == 2) {
						uni.navigateTo({url:`/pages/order/telephone-counseling3?type=2&team=${this.teamId}`})
					} else if (this.consultingType == 3) {
						uni.navigateTo({url:`/pages/order/telephone-counseling4?type=3&team=${this.teamId}`})
					} else if (this.consultingType == 4) {
						uni.navigateTo({url:`/pages/order/telephone-counseling5?type=4&team=${this.teamId}`})
					} else if (this.consultingType == 5) {
						uni.navigateTo({url:`/pages/order/telephone-counseling6?type=5&team=${this.teamId}`})
					}
				}
			},
			async favorite() {
				console.log(this.team)
				if (this.team.favorite === 0) {
					const res = await teamFavorite({status: 1, tid: this.teamId})
					this.team.favorite = 1
					this.$u.toast('收藏成功')
				} else {
					const res = await teamFavorite({status: 0, tid: this.teamId})
					this.team.favorite = 0
					this.$u.toast('取消收藏成功')
				}
			},
			async openLawyerDetail(item) {
				// console.log(item)
				uni.showLoading({mask:true,title:'请稍后'})
				const res = await findLawyer({id: item.id})
				this.lawyerDetail = res.data.data.list
				console.log(res)
				this.showModal = true
			},
			serviceIntroduce() {
				this.serviceIntroduceModal = true
			},
			async _login() {
				uni.showLoading({mask:true,title:'请稍后'})
				if (this.disabledClick) {
					// #ifdef APP-PLUS
					this.disabledClick = false
					const res = await this.$login()
					console.log(res)
					if (res === 'fail') {
						uni.removeStorageSync('token')
						uni.navigateTo({url:'/pages/login/login'})
					}
					setTimeout(() => {
						this.disabledClick = true
					}, 1000)
					uni.hideLoading()
					// #endif
					// #ifdef H5
					uni.navigateTo({url:'/pages/login/login'})
					// #endif
				} else {
					uni.hideLoading()
					return
				}
				uni.hideLoading()
			}
		}
	}
</script>

<style lang="scss">
	page {
		// background: url(../../static/images/lawyer_detail_header_bg.jpg);
		background: #f8f8f8;
	}
	// 导航栏
	.slot-wrap {
		display: flex;
		align-items: center;
		flex: 1;
		padding: 0 30rpx;
		justify-content: space-between;
		.iconfont {
			font-size: 40rpx;
		}
	}
	.header-top {
		height: 203rpx;
		background: url(../../static/images/lawyer_detail_header_bg02.jpg) no-repeat;
		background-size: 100%;
		display: flex;
		justify-content: space-between;
		padding: 10rpx 30rpx 0;
		.info {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			.name {
				font-size: 44rpx;
				color: #2c313c;
				font-weight: bold;
			}
			.company {
				font-size: 24rpx;
				color: #5b5e67;
			}
			.tag {
				display: flex;
				flex-wrap: wrap;
				.bb {
					margin-right: 10rpx;
					height: 40rpx;
					width: 120rpx;
					padding: 0 12rpx;
					font-size: 22rpx;
					margin-bottom: 6rpx;
					display: flex;
					background: transparent;
					justify-content: center;
					align-items: center;
				}
			}
		}
		.avatar {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-between;
			.img {
				width: 142rpx;
				height: 142rpx;
				background-color: #f6f7f9;
				border-radius: 50%;
			}
			.cate {
				width: 142rpx;
				height: 142rpx;
				background-color: #1e6ed8;
				border-radius: 50%;
				font-size: 40rpx;
				color: #fff;
				display: flex;
				justify-content: center;
				align-items: center;
				.item {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					letter-spacing: 1px;
				}
			}
			.online {
				display: flex;
				align-items: center;
				margin-top: 16rpx;
				.text {
					color: #5b5e67;
					font-size: 24rpx;
					padding-left: 8rpx;
				}
				.iconduihao {
					font-size: 24rpx;
					color: #12b234;
				}
			}
			.offline {
				display: flex;
				align-items: center;
				margin-top: 16rpx;
				.text {
					color: #5b5e67;
					font-size: 24rpx;
					padding-left: 8rpx;
				}
				.circel {
					width: 24rpx;
					height: 24rpx;
					background-color: #b8b9bc;
					border-radius: 50%;
				}
			}
		}
		
	}
	.introduce {
		background-color: #f3f7fe;
		font-size: 28rpx;
		color: #5b5e67;
		line-height: 44rpx;
		padding: 50rpx 30rpx 35rpx;
	}
	.team-con {
		background-color: #fff;
		padding: 50rpx 0;
		margin-bottom: 20rpx;
		.title {
			font-size: 38rpx;
			color: #2c313c;
			font-weight: 800;
			margin-left: 20rpx;
			display: inline-block;
			padding-left: 10rpx;
		}
		.member-con {
			padding: 0 20rpx;
			display: flex;
			flex-wrap: wrap;
			.member-item {
				margin: 0 15rpx;
				padding-top: 30rpx;
				text-align: center;
				width: 90rpx;
				image {
					width: 90rpx;
					height: 90rpx;
					border-radius: 50%;
				}
				view {
					font-size: 24rpx;
					color: #222c42;
				}
			}
		}
	}
	.service-tit {
		background-color: #fff;
		display: flex;
		align-items: center;
		padding: 50rpx 30rpx 20rpx 30rpx;
		.tit {
			font-size: 38rpx;
			color: #2c313c;
			font-weight: 800;
		}
		.intro {
			margin-left: auto;
			color: #acb3bb;
			display: flex;
			align-items: center;
			text:nth-child(1) {
				font-size: 34rpx;
			}
			text:nth-child(2) {
				font-size: 24rpx;
				padding-left: 9rpx;
			}
		}
	}
	.service {
		background-color: #fff;
		.item-bg {
			// line-height: 130rpx;
			.item {
				height: 130rpx;
				display: flex;
				align-items: center;
				margin: 0 30rpx;
				border-bottom: 1rpx solid #f6f7f9;
				.icon {
					width: 70rpx;
					height: 70rpx;
					background-color: #ecedf5;
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;
					color: #596579;
					font-size: 28rpx;
				}
				.ser {
					display: flex;
					flex-direction: column;
					margin-left: 12rpx;
					text:nth-child(1) {
						font-size: 28rpx;
						font-weight: bold;
					}
					text:nth-child(2) {
						font-size: 24rpx;
						margin-top: 4rpx;
					}
				}
				.money {
					margin-left: auto;
					display: flex;
					align-items: center;
					.price {
						color: #eb6657;
						font-size: 28rpx;
					}
					.no-icon {
						margin-left: 6rpx;
						width: 36rpx;
						height: 36rpx;
						background-color: #fff;
						border: solid 2rpx #cbcbcb;
						border-radius: 50%;
					}
					.iconduihao {
						margin-left: 6rpx;
						color: #0d2647;
						font-size: 36rpx;
					}
				}
			}
			
		}
		.item-bg:last-child {
			.item {
				border-bottom: none;
			}
		}
		.active {
			background-color: #f8fafe;
			transition: all 0.2s ease;
		}
	}
	.comment {
		padding: 0 20rpx 50px;
		background-color: #fff;
		margin-top: 20rpx;
		.title {
			display: flex;
			align-items: center;
			color: #2c313c;
			padding-top: 30rpx;
			.com {
				font-size: 38rpx;
				font-weight: 800;
				padding-left: 10rpx;
			}
			.num {
				font-size: 28rpx;
				padding-left: 4rpx;
			}
			.more {
				font-size: 24rpx;
				color: #acb3bb;
				opacity: 0.8;
				margin-left: auto;
				display: flex;
				align-items: center;
				.iconfont {
					font-size: 24rpx;
				}
			}
		}
		.list-con {
			.list {
				display: flex;
				border-bottom: 1rpx solid #f6f7f9;
				padding: 30rpx 0;
				margin-left: 15rpx;
				.img {
					width: 70rpx;
					height: 70rpx;
					background-color: #ecedf5;
					border-radius: 50%;
				}
				.phone {
					font-size: 26rpx;
					color: #2c313c;
					padding-left: 16rpx;
					// width: 62%;
					.info {
						text-overflow: -o-ellipsis-lastline;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
					}
				}
				.time {
					margin-left: auto;
					font-size: 22rpx;
					color: #999;
				}
			}
			.list:last-child {
				border-bottom: none;
			}
		}
	}
	.btn-con {
		display: flex;
		height: 50px;
		align-items: center;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		.favorite {
			flex: 2;
			background-color: #fff;
			text-align: center;
			height: 100%;
			line-height: 25px;
			.iconfav {
				font-size: 50rpx;
				color: #999;
			}
			.iconfavfill {
				font-size: 50rpx;
				color: #ccc;
				
			}
			.fav {
				color: #fde348;
			}
			.shou {
				font-size: 24rpx;
				color: #303133;
			}
		}
		.btn {
			flex: 4;
			background-color: #0d2647;
			height: 100%;
			color: #fff;
			text-align: center;
			line-height: 50px;
			font-size: 32rpx;
		}
	}
	.team-content {
		.slot-content {
			.header {
				position: relative;
				// height: 310rpx;
				background-color: #0a2645;
				padding: 30rpx;
				// background: url('../../static/images/user_header_bg.png') no-repeat top right;
				background-size: 15%;
				.top {
					display: flex;
					align-items: center;
					.name {
						color: #fff;
						text:first-child {
							font-size: 40rpx;
						}
						text:last-child {
							font-size: 28rpx;
							padding-left: 20rpx;
						}
					}
					.company {
						color: #fff;
						font-size: 24rpx;
						padding-top: 10rpx;
					}
					image {
						width: 140rpx;
						height: 140rpx;
						border-radius: 50%;
						margin-right: 20rpx;
					}
				}
				.bot {
					display: flex;
					margin-top: 30rpx;
					// justify-content: space-around;
					flex-wrap: wrap;
					.bb {
						background-color: transparent;
						color: #d9b975 !important;
						font-size: 22rpx;
						width: 22%;
						margin-left: 2.3%;
						margin-bottom: 6rpx;
						text-align: center;
					}
				}
				.bg {
					position: absolute;
					right: 0;
					top: 0;
					width: 100rpx;
					height: 133rpx;
					opacity: 0.05;
				}
			}
			.info {
				padding: 50rpx 30rpx;
				text-indent: 2em;
				font-size: 30rpx;
				color: #5b5e67;
			}
		}
	}
</style>
